<template>
    <div class="header">
        <back-ward></back-ward>
        <h1>旅游计划</h1>
        <span class="icon" @click="$emit('open-input')">&#43;</span>
    </div>
</template>

<script>
import BackWard from './BackWard.vue';

export default {
    name: 'PlanHeader',
    components: {
        BackWard
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';

.header {
  position: relative;
  @include flex-row;
  @include vh-center;
  height: $headerHeight;
  background-color: $defaultBgColor;
  
  h1 {
    font-size: .18rem;
  }
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: .3rem;
    @include flex-row;
    @include vh-center;
    width: $headerHeight;
    height: $headerHeight;
  }
}
</style>